<template>
  <view class="home_btn_box">
    <view
      class="item_btn"
      v-for="(item, index) in homeBtns"
      :key="index"
      @click="to(item.url, index)"
    >
      <image
        class="home_btn_img"
        :class="{ padding: item.padding }"
        :src="index == current ? item.imgCheck : item.img"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    current: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      visible: { show: false },
      homeBtns: [
        {
          name: "药品",
          url: "/pages/medicine/index",
          img: "/static/btn/ic_medicine.png", imgCheck: "/static/btn/ic_medicine_check.png", padding: true
        },
        {
          name: "计划",
          url: "/pages/plan/index",
          img: "/static/btn/ic_plan.png", imgCheck: "/static/btn/ic_plan_check.png", padding: true
        },
        {
          name: "首页",
          url: "/pages/home/index",
          img: "/static/btn/ic_home.png", imgCheck: "/static/btn/ic_home_check.png"
        },
        {
          name: "记录",
          url: "/pages/record/index",
          img: "/static/btn/ic_record.png", imgCheck: "/static/btn/ic_record_check.png", padding: true
        },
        {
          name: "我的",
          url: "/pages/my/index",
          img: "/static/btn/ic_my.png", imgCheck: "/static/btn/ic_my_check.png"
        },
      ],
    };
  },
  methods: {
    to(url, index) {
      if (index == 2 && this.current == 2) {
        this.$emit("add");
      } else {
        uni.reLaunch({
          url: url,
        })
      }
    },
  },
  mounted() {
    if (this.current == 2) {
      this.homeBtns[2].imgCheck = "/static/btn/ic_add_check.png";
    }
    console.log('this.homeBtns：', this.current, this.homeBtns);
  },
  created() {

  },
};
</script>

<style
  lang="scss"
  scoped
>
.home_btn_box {
  height: 98rpx;
  width: 100%;
  display: flex;
  background: white;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: #eee solid 1rpx;

  .item_btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .home_btn_img {
      width: 56rpx;
      height: 56rpx;
      box-sizing: border-box;

      &.padding {
        padding: 6rpx;
      }
    }
  }

}
</style>